<template>
  <div class="index-page">
    <a-input-search
      v-model:value="searchParams.text"
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    <my-divider />
    <a-tabs v-model:activeKey="activeKey" @change="onTabChange">
      <a-tab-pane key="post" tab="文章">
        <PostList :post-list="postList" />
      </a-tab-pane>
      <a-tab-pane key="picture" tab="图片">
        <PictureList :picture-list="pictureList" />
      </a-tab-pane>
      <a-tab-pane key="user" tab="用户">
        <user-list :user-list="userList" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import PostList from "@/components/PostList.vue";
import PictureList from "@/components/PictureList.vue";
import UserList from "@/components/UserList.vue";
import MyDivider from "@/components/MyDivider.vue";
import { useRoute, useRouter } from "vue-router";
import myAxios from "@/plugins/myAxios";
// 准备一个容器装从后端获取的文章数据
const postList = ref([]);
//准备一个容器装从后端获取的图片数据
const pictureList = ref([]);
//准备一个容器装从后端获取的用户数据
const userList = ref([]);
const loadData = () => {
  myAxios.post("post/list/page/vo", {}).then((res: any) => {
    console.log(res);
    postList.value = res.records;
  });

  myAxios.post("picture/list/page/vo", {}).then((res: any) => {
    console.log(res);
    pictureList.value = res.records;
  });

  myAxios.post("user/list/page/vo", {}).then((res: any) => {
    console.log(res);
    userList.value = res.records;
  });
};
loadData();

const router = useRouter();
const route = useRoute();
// 当前标签页
const activeKey = route.params.category;

// 抽象出一个init初始值
const initSearchParams = {
  text: "",
  pageSize: 10,
  pageNum: 1,
};

// 抽取 所有搜索的参数
const searchParams = ref(initSearchParams);

//监听-同步-如果这个函数内的任何一个变量发生了一个修改就会重新执行一遍
watchEffect(() => {
  searchParams.value = {
    ...initSearchParams,
    // 查询参数
    text: route.query.text,
  } as any;
});

// 改变页面路由
const onSearch = (value: string) => {
  alert(value);
  router.push({
    query: searchParams.value,
  });
};

const onTabChange = (key: string) => {
  router.push({
    path: `/${key}`,
    query: searchParams.value,
  });
};
</script>
